<template>
	<view class="uc-menu">
		<button class="iconfont icon-menu" @click="expand" v-if="!show"></button>
		<view class="menu-mask" v-if="show" @click="contract"></view>
		<view class="menu-panel" :class="{'expand': show}">
			<view class="menu-header group">
				<!-- <view class="group-item">
					<image class="group-item-icon" src="/static/images/chatgpt.png" mode="aspectFit" />
					<view class="group-item-name ellipsis">ChatGPTChatGPTChatGPTChatGPT</view>
					<button class="group-item-button iconfont icon-edit"></button>
				</view> -->
				<view class="group-item">
					<image class="group-item-icon" src="/static/images/chatgpt.png" mode="aspectFit" />
					<view class="group-item-name ellipsis">ChatGPT</view>
				</view>
			</view>
			<view class="menu-body">
				<!-- <view class="module-header">
					<view class="iconfont icon-search"></view>
					<view class="module-name">Explore/探索</view>
				</view> -->
				<view class="new-chat">
					<button class="btn-new-chat iconfont icon-plus" @click="newConversation">发起新的对话</button>
				</view>
				<view class="chat-history">
					<view class="module-header">近期聊天</view>
					<uni-scroller 
					:refresher-enabled="false"  
					@lower="lower"
					:triggered="triggered"
					:infiniteStatus="infiniteStatus"
					no-more-text=""
					class="module-body">
						<view class="chat-item" v-for="(item,idx) in conversations" :key="idx" 
						:class="{ active: path == '/pages/conversation/dialog?id=' + item.id , editable: !!item.editable, hover: !!item.control}">
							<view class="iconfont icon-chat" @click="viewConversation(item)"></view>
							<view v-if="!item.editable" class="chat-subject ellipsis" @click="viewConversation(item)">{{item.subject}}</view>
							<view v-else class="chat-subject ellipsis">
								<input ref="chatSubject" :focus="true" v-model="item.newSubject" class="subject-input" @confirm="confirmEdit(item, idx)" />
							</view>
							<view class="iconfont icon-tool" v-if="!item.control && !item.editable" @click.stop="control(item, idx)"></view>
							<view class="row-tool" v-if="!item.editable">
							  <button class="btn-edit iconfont icon-edit" @click="edit(item, idx)"></button>
							  <button class="btn-remove iconfont icon-trash" @click.stop="remove(item, idx)"></button>
							</view>
							<view class="row-tool" v-else>
							  <button class="btn-confirm iconfont icon-check" @click="confirmEdit(item, idx)"></button>
							  <button class="btn-close iconfont icon-close" @click="cancelEdit(item, idx)"></button>
							</view>
							
						</view>
						
					</uni-scroller>
				</view>
			</view>
			<view class="menu-footer">
				<view class="order-info" @click="order">
					<view class="iconfont icon-record"></view>
					<view class="label">订单记录</view>
				</view>
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar|| '/static/images/avatar.png'" mode="aspectFit"></image>
					<view class="user-name ellipsis">{{userName}}</view>
					<button class="btn-edit iconfont icon-setting" @click="profile"></button>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	const PAGE_SIZE = 20;
	export default {
		name:"uc-menu",
		data() {
			return {
				show: false,
				page: 1,
				size:PAGE_SIZE,
				conversations: [] ,// 对话列表
				
				reachBottom: false,
				infiniteStatus: 0,
				triggered: false,
			};
		},
		computed:{
			userName(){
				let userInfo = this.userInfo;
				return userInfo.nick_name + " / " + userInfo.phone;
			},
			path(){
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				 
				console.log("当前路径：" + currentPage.route);
				return currentPage.route;
			}
		},
		
		methods:{
			/**
			 * 个人信息
			 */
			profile(){
				this.contract();
				uni.navigateTo({
					url:"/pages/common/profile"
				})
			},
			/**
			 * 订单记录
			 */
			order(){
				this.contract()
				uni.navigateTo({
					url:"/pages/common/order"
				})
			},
			newConversation(){
				this.contract();
				uni.navigateTo({
					url:"/"
				})
			},
			/**
			 * 展开 菜单
			 */
			expand(){
				this.show = true;
				this.refresh();
			},
			/**
			 * 收起 菜单
			 */
			contract(){
				this.show = false;
			},
			/**
			 * 刷新
			 */
			refresh(){
				this.page = 1;
				this.loadData();
				this.loadUserInfo();
			},
			
			/**
			 * 加载更多
			 * @param {Object} e
			 */
			lower(e) {
				if(this.reachBottom || this.infiniteStatus < 0){
					
					return;
				}
				this.reachBottom = true;
				this.infiniteStatus = 1;
				this.page = this.page +1;
				
				this.loadData();
			},
			/**
			 * 加载数据
			 */
			loadData(){
				
				this.$api.conversationService.findPage({
					size: this.size,
					page: this.page,
					order_by: 'update_time desc'
					
				}).then(res => {
					this.total = res.total;
					var items = res.items;
					let list = this.conversations || [];
					if(this.page == 1){
						list = [];
					}
					
					if(items.length < this.size && this.total != 0){
						this.infiniteStatus = -1
					}
					// 不满一页
					if(this.page == 1 && (this.total < 5 || this.total == -1)){
						this.infiniteStatus = -2;
					}
					
					list = list.concat(items);
					this.conversations = global.unique(list, 'id');
			
					if(this.conversations.length  == this.total){
						this.infiniteStatus = -1;
					}
				}).finally( () =>{
					this.triggered = false;
					this.reachBottom = false;
				})
			},
			/**
			 * 查看对话
			 * @param {Object} item
			 */
			viewConversation(item){
				this.contract();
				uni.navigateTo({
					url:"/pages/conversation/dialog?id=" + item.id
				})
			},
			/**
			 * 管理
			 * @param {Object} item
			 * @param {Object} idx
			 */
			control(item, idx){
				this.clearEdit();
				this.conversations[idx] = {
					id: item.id,
					subject: item.subject,
					newSubject: item.subject,
					control: true,
				}
				this.refreshConversations();
				
			},

			/**
			 * 进入编辑
			 * @param {*} item 
			 */
			edit(item, idx){
			  this.clearEdit();
			  this.conversations[idx] = {
				id: item.id,
				subject: item.subject,
				newSubject: item.subject,
				editable: true,
			  }
			  
			  this.refreshConversations();
			 
	
			},
			/**
			 * 刷新对话列表
			 */
			 refreshConversations(){
			  let conversations = JSON.parse(JSON.stringify(this.conversations));
			  
			  this.conversations = conversations;
			},
		
			/**
			 * 清理编辑状态
			 */
			clearEdit(){
			  
			  this.conversations.forEach((item, idx)=>{
				if(item.editable || item.control){
				  this.conversations[idx] = {
					subject: item.subject,
					id: item.id
				  }
				  
				}
			  })
			  
			},
			/**
			 * 确定编辑
			 * @param {*} item 
			 */
			confirmEdit(item){
				if(!item.newSubject){
					global.error('对话标题不能为空');
					return ;
				}
				this.$api.conversationService.update({
					id: item.id,
					subject: item.newSubject
				}).then(res => {
					global.toast('修改成功');
					item.subject = item.newSubject;
					delete item.editable;
					delete item.newSubject;
					this.refreshConversations();
				});
			},
			/**
			 * 取消编辑
			 * @param {*} item 
			 */
			cancelEdit(item){
			  delete item.editable;
			  delete item.newSubject;
			  this.refreshConversations();
			},
			
			/**
			 * 删除
			 * @param {Object} item
			 */
			remove(item){
				global.showConfirm({
					title:'',
					content:'确认删除 《' + item.subject + '》',
					confirm:(res) => {
						
						this.$api.conversationService.remove(item.id).then(res => {
							
							let pos = 0;
							for(let i = 0 ; i < this.conversations.length; i++){
								if(item.id == this.conversations[i].id){
									pos = i;
									break;
								}
							}
							
							this.conversations.splice(pos, 1);
							if(this.conversations.length < PAGE_SIZE){
								this.refresh()
							}
							
						});
					}
				})
				
			}
		
		}
	}
</script>

<style scoped lang="scss">
	.uc-menu{
		
	}
	.icon-menu{
		color:#F7F7F7;
		position: relative;
		z-index: 100;
	}
	.menu-mask{
		position: fixed;
		left: 0;
		top:0;
		bottom:0;
		right:0;
		background-color: rgba(51,51,51, 0.75);
		z-index: 88;
	}
	.menu-panel{
		z-index: 99;
		width: 530rpx;
		position: fixed;
		
		top:0;
		bottom:0;
		background-color: #17181A;
		box-sizing: border-box;
		padding: 40rpx 0rpx;
		display: flex;
		height: 100%;
		flex-direction:column;
		left:-530rpx;
		transition: left ease 0.3s;
		
		&.expand{
			left: 0;
		}
		
		.menu-header{
			padding:0 40rpx;
			.group-item{
				height: 60rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				
				.group-item-icon{
					width: 60rpx;
					height: 60rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}
				.group-item-name{
					font-size: 28rpx;
					flex:1;
					text-align: left;
					overflow: hidden;
					line-height: 60rpx;
				}
				.group-item-button{
					margin-left: 14rpx;
					color:#FFFFFF;
					font-size: 40rpx;
					height: 60rpx;
					width: 60rpx;
					padding:0;
					line-height: 60rpx;
				}
			}
		}
		.menu-body{
			flex:1;
			overflow: hidden;
			display:flex;
			
			flex-direction: column;
			
			.module-header{
				height: 44rpx;
				display: flex;
				padding:0 40rpx;
				line-height: 44rpx;
				.iconfont{
					height: 44rpx;
					width: 44rpx;
					margin-right: 20rpx;
					font-size: 34rpx;
					line-height: 44rpx;
				}
				.module-name{
					font-size: 28rpx;
					line-height: 44rpx;
				}
			}
			.new-chat{
				padding:40rpx 0rpx;
				.btn-new-chat{
					width: 370rpx;
					height: 72rpx;
					border-radius: 16rpx;
					border: 1rpx solid $uni-color-primary;
					padding:0rpx;
					text-align: center;
					color: $uni-color-primary;
					font-size: 28rpx;
					line-height: 70rpx;
					&::before{
						font-size: 32rpx;
						margin-right: 20rpx;
					}
				}
				
				
			}
			
			.chat-history{
				
				flex:1;
				overflow:hidden;
				display: flex;
				flex-direction: column;
				.module-header{
					padding:0 0 0 40rpx;
				}
				.module-body{
					flex:1;
					margin-top:50rpx;
					overflow: hidden;
					
					.chat-item{
						width: 530rpx;
						height: 88rpx;
						line-height: 88rpx;
						display: flex;
						box-sizing: border-box;
						
						align-items: center;
						
						box-sizing: border-box;
						padding:0 0 0 30rpx;
						
						
						
						.icon-tool{
							height: 88rpx;
							width: 70rpx;
							text-align: center;
							font-size: 24rpx;
						}
						
						.row-tool{
						  width: 140rpx;
						  display:none; 
						  .iconfont{
							height: 88rpx;
							width: 70rpx;
							text-align: center;
							color: #ffffff;
							padding: 0;
							margin: 0;
							font-size: 24rpx;
							background: transparent;
						  } 
				
						}
				   
				
						&.hover, &.editable{
						  border-radius: 4rpx;
						  background-color: rgba(255, 255, 255, 0.3);
						  .row-tool {
							display: flex;
						  }
						}
						
						
					
						&.active{
							background-color: rgba(134,223,186,0.1);
							border-radius: 20rpx;
						}
						.icon-chat{
							font-size: 28rpx;
							width: 32rpx;
							margin-right: 18rpx;
						}
						.chat-subject{
							flex:1;
							text-align: left;
							font-size: 26rpx;
							.subject-input{
								font-size: 26rpx;
							}
						}
						.btn-remove{
							height: 88rpx;
							width:88rpx;
							text-align: center;
							color:#FFFFFF;
							padding:0;
							margin:0;
							font-size: 28rpx;
						}
					}
					
					
				}
				
			}
			
		}
		.menu-footer{
			padding:20rpx 40rpx 0;
			.order-info{
				display: flex;
				font-size: 32rpx;
				line-height: 44rpx;
				height: 44rpx;
				align-items: center;
				.iconfont{
					font-size: 44rpx;
					line-height: 44rpx;
					width: 44rpx;
					margin-right: 24rpx;
					color:#FFFFFF;
				
				}
			}
			
			.user-info{
				margin-top: 60rpx;
				display: flex;
				height: 72rpx;
				align-items: center;
				
				.avatar{
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				
				.user-name{
					flex:1;
					text-align: left;
				}
				
				.btn-edit{
					color:#FFFFFF;
					padding:0;
					margin: 0;
					height: 44rpx;
					width: 44rpx;
					font-size: 44rpx;
					line-height: 44rpx;
				}
			}
		}
		
		
	
	}
</style>